<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;list-style: none;}
        .main{
            width:100%;
            height: 80rem;
            background: #fff;

        }
        #box1,#box2{
            width:98%;
            margin:0 auto;
        }
        .customerInformation{
            margin-top: 2rem;
        }
        #tit{
            width: 100%;
            height: 3rem;
            overflow: hidden;
            border-bottom: 1px solid #8e8e8e;
        }
        #tit span{
            float: left;
            width: 10rem;
            height: 2.8rem;
            line-height: 3rem;
            text-align: center;
        }
        #con{
            width: 100%;
            height: 100%;
            /*内部带滚动条*/
            /*height: 25rem;*/
            /*overflow: auto;*/
        }
        #con li{
            width: 100%;
            height: 100%;
            display: none;
        }
        #con .show{
            display: block;
        }
        #tit .select{
            color:#00adef;
            border-bottom: 0.3rem solid #00adef;
        }

        /*search*/
        .search{
            margin: 1rem auto;
        }
        .search input{
            width: 10rem;
            height: 1.5rem;
            font-size: 14px;
        }

        .btn{
            padding: 0.3rem 1.5rem;
            background: #00adef;
            color: #fff;
            text-align: center;
        }
        /*表格*/
        /* table
        -----------------------------------------------------------------------------*/
        table{border-collapse:collapse;border-spacing:0;}
        .c-t-center {
            width: 100%;
            text-align: center;
        }
        .c-main {
            width: 100%;
            margin: 0 auto;
        }
        .tb th { padding:10px 5px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#f4f5f6; line-height: 20px; color:#999; vertical-align: middle;}
        .tb td { padding:10px 5px; line-height: 25px; background-color:#fff; border-bottom:1px solid #ddd; word-wrap: break-word; word-break:break-all; color:#666; vertical-align: middle;}
        .tb .hover td { background-color:#fafafa;}
        .tb-b {border:1px solid #ddd;}
        .tb-b th , .tb-b td {border-color:#ddd; border-left:1px solid #ddd;}
    </style>
</head>
<body id="alert">
<div class="main">
    <div id="box1">
        <div class="c-main ptb20" class="customerInformation">
            <table id="process-demo" class="tb tb-b c-t-center">
                <thead>
                <tr>
                    <th>交易市场</th>
                    <th>中心资金账户</th>
                    <th>中心客户编码</th>
                    <th>市场客户号</th>
                    <th>市场资金账户</th>
                    <th>姓名</th>
                    <th>客户全称</th>
                    <th>币种</th>
                    <th>机构组织</th>
                    <th>证件类别</th>
                    <th>证件编号</th>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>山东地红</td>
                    <td>00114378353573</td>
                    <td>43576867564583</td>
                    <td>7867543234567</td>
                    <td>45677674356</td>
                    <td>王建国</td>
                    <td>王建国</td>
                    <td>RMB</td>
                    <td>个人</td>
                    <td>身份证</td>
                    <td>34556755432134</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="box2">
        <div id="tit">
            <span class="select">客户信息</span>
            <span>产品信息</span>
            <span>交易明细</span>
        </div>
        <ul id="con">
            <!-- 客户信息 start -->
            <li class="show">
                <div class="search">
                    <label for="cursorName">客户名称:</label>
                    <input type="text" placeholder="请输入客户名称" id="cursorName">
                    <label for="cursorNameNumber">市场客户号:</label>
                    <input type="text" placeholder="请输入客户名称" id="cursorNameNumber">
                    <button class="btn">查询</button>
                </div>
                <!-- 表格 -->
                <div class="c-main ptb20">
                    <table id="process-demo-3" class="tb tb-b c-t-center">
                        <thead>
                        <tr>
                            <th>交易市场</th>
                            <th>中心资金账户</th>
                            <th>中心客户编码</th>
                            <th>市场客户号</th>
                            <th>市场资金账户</th>
                            <th>姓名</th>
                            <th>客户全称</th>
                            <th>币种</th>
                            <th>机构组织</th>
                            <th>证件类别</th>
                            <th>证件编号</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr> <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>
                        <tr>
                            <td>山东地红</td>
                            <td>00114378353573</td>
                            <td>43576867564583</td>
                            <td>7867543234567</td>
                            <td>45677674356</td>
                            <td>王建国</td>
                            <td>王建国</td>
                            <td>RMB</td>
                            <td>个人</td>
                            <td>身份证</td>
                            <td>34556755432134</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </li>
            <!-- 客户信息 END -->
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>
</div>
</body>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script type="text/javascript">
    // $("#tit span").click(function () {
    //     var i=$("#tit span").index(this);
    //     $(this).addClass('select').siblings().removeClass('select');
    //     $("#con li").eq(i).show().siblings().hide();
    // });
    $("#tit span").click(function () {
        var i= $("#tit span").index(this);
        $(this).addClass('select').siblings().removeClass('select');
        $("#con li").eq(i).show().siblings().hide();
    })
</script>
</html>